<template>
	<view>
		<view class="content-form">
			<!-- <view class="page-title">业主信息录入</view> -->
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="140">
				<u-form-item label="城市" prop="city" right-icon="arrow-right">
					<u-input disabled v-model="form.city" placeholder="请选择" @click="showAddr = !0" />
				</u-form-item>
				<u-form-item label="小区名称" prop="housename">
					<u-input v-model="form.housename" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="门牌号" prop="housenumber">
					<u-input v-model="form.housenumber" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="面积" prop="area">
					<u-input v-model="form.area" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="朝向" prop="housebaseset_orientation_id">
					<u-input v-model="form.housebaseset_orientation_id" placeholder="可选填" @click="show_com_orientation = !0" type="select"/>
				</u-form-item>
				<u-form-item label="户型" prop="housebaseset_housetype_ids">
					<u-input v-model="form.housebaseset_housetype_ids" placeholder="可选填" @click="show_com_housetype = !0" type="select"/>
				</u-form-item>
				
				<u-form-item label="装修" prop="housebaseset_decorationtype_id">
					<u-input v-model="form.housebaseset_decorationtype_id" placeholder="可选填" @click="show_com_decorationtype = !0" type="select"/>
				</u-form-item>
				
<!-- 				<view class="check-box">
					<u-form-item label="售后按揭">
						<u-checkbox-group slot="right" shape="circle">
							<u-checkbox active-color="red" v-model="checked1" ></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="家政服务" :border-bottom="false">
						<u-checkbox-group slot="right" shape="circle">
							<u-checkbox active-color="red" v-model="checked2" ></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view> -->
				

				<u-form-item label="期望售价" prop="expectedprice">
					<u-input v-model="form.expectedprice" placeholder="请输入"/>
					<text class="right-text" slot="right">万</text>
				</u-form-item>
				<u-form-item label="最低售价" prop="minimumprice" :border-bottom="false">
					<u-input v-model="form.minimumprice" placeholder="请输入"/>
					<text class="right-text" slot="right">万</text>
				</u-form-item>
				
				<view class="check-box"></view>
				<u-form-item label="定位地址" prop="intro" :border-bottom="false">
					<u-input v-model="form.address" placeholder="请选择" @click="openMap" disabled/>
				</u-form-item>
				<view class="check-box"></view>
				
				<view class="upload-box">
					<!-- <view class="title">上传房屋视频</view>
					<view class="upload-con up-video u-flex">
						<view class="icon">
							<image src="../static/icon/up-video.png"></image>
						</view>
					</view> -->
					
					<view class="title">上传房屋图片</view>
					<!-- <view class="upload-con up-video u-flex" @click="upLoad('images')">
						<view class="icon">
							<image src="../static/icon/up-image.png"></image>
						</view>
					</view> -->
					
					<view class="upload">
						<u-upload width="195" @on-list-change="changeed" :action="action" name="file" :header="{token:token}" max-count="9"></u-upload>
					</view>
					
					<view class="title">上传不动产证图片</view>
					
					<view class="upload">
						<u-upload width="195" @on-list-change="changeed2" :action="action" name="file" :header="{token:token}" max-count="9"></u-upload>
					</view>
					<!-- <view class="upload-con up-video u-flex" @click="upLoad('ownershipcertificateimages')">
						<view class="icon">
							<image src="../static/icon/up-image.png"></image>
						</view>
					</view> -->
				</view>
				
				<view class="check-box"></view>
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="电话" prop="phone">
					<u-input v-model="form.phone" />
				</u-form-item>
				<u-form-item label="微信/QQ" prop="wxqq">
					<u-input v-model="form.wxqq" placeholder="可选填"/>
				</u-form-item>
				<view class="tips u-flex">
					<image src="@/static/icon/tips.png"></image>
					<text>提示：如有不方便电话沟通的可以微信或QQ联系</text>
				</view>
			</u-form>
			
			<u-action-sheet :list="com_orientation.map(item=>({text:item.name}))" v-model="show_com_orientation" @click="actionSheet_com_orientation"></u-action-sheet>
			<u-action-sheet :list="com_housetype.map(item=>({text:item.name}))" v-model="show_com_housetype" @click="actionSheet_com_housetype"></u-action-sheet>
			<u-action-sheet :list="com_decorationtype.map(item=>({text:item.name}))" v-model="show_com_decorationtype" @click="actionSheet_com_decorationtype"></u-action-sheet>

			<view class="submit-btn">
				<u-button shape="circle" type="primary" @click="submit">确认委托</u-button>
			</view>
			
			<view class="tips-xy">
				<u-checkbox label-size="26" active-color="#de1f1c" shape="circle" v-model="checked">已阅读<text 
				 @click.sotp="$app.openXY(6)" style="color: #1f87f9;">《房联网保密协议与服务协议》</text></u-checkbox>
			</view>
		</view>
		<city-select v-model="showAddr" @city-change="cityChange"></city-select>
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAddr:!1,
				show_com_orientation:!1,
				show_com_housetype:!1,
				show_com_decorationtype:!1,
				labelStyle:{color:'#111',fontWeight:'bold',fontSize:'30rpx'},
				form: {
					name: '',
					phone: '',
					wxqq:'',
					city:'',
					housename:'',
					housenumber:'',
					area:'',
					housebaseset_orientation_id:'',
					years:'',
					housebaseset_housetype_ids:'',
					housebaseset_decorationtype_id:'',
					expectedprice:'',
					minimumprice:'',
					address:'',
					images:'',
					ownershipcertificateimages:'',
					type:''
				},
				action:'',
				checked:!1,
				
				housebaseset_orientation_id:'',
				housebaseset_housetype_ids:'',
				housebaseset_decorationtype_id:''
			}
		},
		methods: {
			submit(){
				const form = this.form
				if(!this.checked){this.$u.toast('请先阅读并同意协议');return}
				if(!form.images){this.$u.toast('请上传图片');return}
				if(!form.ownershipcertificateimages){this.$u.toast('请上传房产证');return}
				
				this.$refs.uForm.validate(valid=>{
					valid && this.$u.post('/api/agent/addHouse',{
						...form,
						images:form.images.toString(),
						ownershipcertificateimages:form.ownershipcertificateimages.toString(),
						housebaseset_decorationtype_id:this.housebaseset_decorationtype_id,
						housebaseset_orientation_id:this.housebaseset_orientation_id,
						housebaseset_housetype_ids:this.housebaseset_housetype_ids,
					}).then(res=>{
						this.$app.jump('/pages/house/publish/result',!0)
					})
				})
			},
			cityChange(e){
				this.form.city = e.area.label
			},
			actionSheet_com_orientation(index){
				this.housebaseset_orientation_id = this.com_orientation[index].id
				this.form.housebaseset_orientation_id = this.com_orientation[index].name
			},
			actionSheet_com_housetype(index){
				this.housebaseset_housetype_ids = this.com_housetype[index].id
				this.form.housebaseset_housetype_ids = this.com_housetype[index].name
			},
			actionSheet_com_decorationtype(index){
				this.housebaseset_decorationtype_id = this.com_decorationtype[index].id
				this.form.housebaseset_decorationtype_id = this.com_decorationtype[index].name
			},
			openMap(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.form.address = res.address
					}
				})
			},
			// 照片
			changeed(lists,name){
				if(lists.every(item=>item.response)){
					this.form.images = lists.map(i=>i.response.data.fullurl)
				}
			},
			// 房产证
			changeed2(lists,name){
				if(lists.every(item=>item.response)){
					this.form.ownershipcertificateimages = lists.map(i=>i.response.data.fullurl)
				}
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		},
		onLoad({type}) {
			this.form.type = Number(type) + 1
			this.action = this.$u.api.uploadUrl()
		},
		onReady() {
			// 添加验证规则
			this.$refs.uForm.setRules({
				name: [{required: true,message: '请输入姓名'}],
				phone: [{required: true,message: '请输入手机号'}],
				housename: [{required: true,message: '请输入小区名称'}],
				housenumber: [{required: true,message: '请输入门牌号'}],
				area: [{required: true,message: '请输入面积'}],
				expectedprice: [{required: true,message: '请输入期望售价'}],
				minimumprice: [{required: true,message: '请输入最低价'}],
				address: [{required: true,message: '请选择地址'}]
			})
		}
	}
</script>

<style lang="scss">
	.content-form{
		padding: 0 42rpx;overflow: hidden;
		.page-title{font-size: 36rpx;font-weight: bold;padding: 10rpx 0;}
		.right-text{font-weight: bold;color: #333;}
	}
	/deep/.u-form-item.u-border-bottom{border-bottom: 1rpx solid #ddd;padding: 18rpx 0!important;
		&::after{display: none;}
	}
	.check-box{position: relative;padding: 10rpx 0;
		&::before{content: '';display: block;position: absolute;box-sizing: border-box;border: 10rpx solid #f4f4f4;width: 200%;height: 100%;left: 50%;transform: translateX(-50%);top: 0;z-index: -1;}
	}
	.upload-box{
		.title{font-size: 28rpx;padding: 30rpx 0;}
		.upload-con{height: 320rpx;border-radius: 10rpx;justify-content: center;background-color: #f4f4f4;
			.icon{width: 154rpx;height: 154rpx;}
			image{display: block;width: 100%;height: 100%;}
		}
	}
	.tips{
		padding: 10rpx 0 50rpx;
		image{width: 24rpx;height: 24rpx;display: block;padding-right: 15rpx;}
		text{font-size: 24rpx;color: #666;}
	}
	// 管家
	.steward{
		padding: 0 0 40rpx;
		.item {display: flex;}
		.radio{
			padding: 0 10rpx 0 0;
			/deep/ .u-radio__label{display: none;}
		}
		.image {width: 110rpx;flex: 0 0 110rpx;height: 110rpx;margin-right: 20rpx;border-radius: 50%;}
		.info-wrap{
			width: 0;padding: 20rpx 0;
			.top-title{
				.title{
					overflow: hidden;
					view{margin: 0 6rpx;}
					.name{font-size: 30rpx;font-weight: bold;margin-left: 0;}
					.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;white-space: nowrap;}
					.score{color: #f00;font-size: 28rpx;margin-right: 0;}
				}
			}
			.label{
				padding: 10rpx 0;flex-wrap: wrap;
				view{border: 1rpx solid #ccc;font-size: 20rpx;border-radius: 8rpx;padding: 4rpx 10rpx;margin-right: 10rpx;margin-top: 4rpx;
					&:last-child{margin-right: 0;}
				}
			}
		}
		.handle{
			text{background-color: #ffd7d7;color: #ff1e1e;width: 60rpx;height: 60rpx;text-align: center;line-height: 60rpx;border-radius: 50%;margin-right: 10rpx;
				&:last-child{margin-right: 0;}
				font-weight: bold;
			}
		}
	}
	.submit-btn{}
	.tips-xy{padding: 20rpx  0 30rpx 10rpx;}
</style>